<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            display: block;
            margin: 10px auto;
            border: 1px solid;
            color: rgb(33, 147, 29);
        }
    </style>
</head>

<body>
    <canvas width="500px" height="500px"></canvas>

    <script>
        var can = document.getElementsByTagName('canvas')[0],//画布
            cxt = can.getContext('2d')//canvas对象---画笔

            cxt.beginPath()//开始路径
            cxt.moveTo(50, 200)//起点
            cxt.lineTo(150, 200)//2
            cxt.lineTo(186, 107)
            cxt.lineTo(222, 200)//4
            cxt.lineTo(322, 200)
            cxt.lineTo(248, 262)
            cxt.lineTo(280, 355)//7
            cxt.lineTo(186, 293)
            cxt.lineTo(98, 355)//9
            cxt.lineTo(132, 262)
            cxt.fillStyle='yellow'
            cxt.fill()
            cxt.closePath()//结束路径
            cxt.stroke()//绘制 
            




    </script>
</body>

</html>